import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import {coerceNumberProperty} from '@angular/cdk/coercion';
import { MatSliderChange } from '@angular/material/slider';
import { EventService, EventSource, EventMessage } from 'src/app/services/event.service';
import { Settings } from 'src/app/entity/TT';
import { SettingsComponent } from '../settings.component';

@Component({
  selector: 'app-media',
  templateUrl: './media.component.html',
  styleUrls: ['./media.component.scss']
})
export class MediaComponent implements OnInit, OnChanges {

  autoTicks = false;
  disabled = false;
  invert = false;
  max = 100;
  min = 0;
  showTicks = false;
  step = 1;
  thumbLabel = true;
  value = 0;
  vertical = false;

  private _tickInterval = 1;

  constructor(private eventService: EventService, 
    private settingsComponent: SettingsComponent)
    { 


  }

  ngOnInit() {
    setTimeout(()=>{
      const s = this.settingsComponent.set;
      if(s && this.value != s.voiceValue)
        this.value = s.voiceValue
    },200)
  }

  ngOnChanges(changes: SimpleChanges) {
    
  }

  get tickInterval(): number | 'auto' {
    return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : 0;
  }
  
  set tickInterval(value) {
    this._tickInterval = coerceNumberProperty(value);
  }

  onChange(chg: MatSliderChange){
    console.log('change', chg.value)
    this.eventService.sendEvent(EventSource.SET_VOICE_VALUE, chg.value);
  }
}
